<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>css3动画</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.container {
				width: 100vw;
				height: 100vh;
				background-color: #000;
			}

			.moon {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: #F5FFFA;
				box-shadow: 0 0 60px #F5FFFA;
				position: absolute;
				left: 80%;
				top: 150px;
				animation: myMoon 20s linear;
			}

			@keyframes myMoon {
				0% {
					left: 60%;
					top: 350px;
					opacity: 0;
				}

				100% {
					left: 80%;
					top: 150px;
					opacity: 1;
				}
			}

			img {
				width: 8px;
				height: 8px;
				opacity: 0;
				position: absolute;
				left: 0px;
				top: 0px;
				animation: myStar 2s ease-in-out infinite;
			}

			@keyframes myStar {
				0% {
					opacity: 0;
				}

				50% {
					opacity: 0.4;
				}

				100% {
					opacity: 0;
				}
			}

			.star {
				width: 1px;
				display: block;
				position: absolute;
				background-color: transparent transparent transparent rgba(255, 255, 255, .5);
				opacity: 0;
				animation: star 4s linear infinite;
			}

			.star::after {
				content: '';
				display: block;
				border: 1px solid #fff;
				border-width: 0px 90px 2px 90px;
				border-color: transparent transparent transparent rgba(255, 255, 255, .5);
				transform: rotate(-45deg);
			}

			@keyframes star {
				0% {
					opacity: 0;
				}

				30% {
					opacity: 1;
				}

				100% {
					opacity: 0;
					transform: translate(-500px, 300px);
				}
			}
		</style>
	</head>

	<body>

		<div class="container">
			<div class="moon"></div>
		</div>
		<script>
			var width = document.body.clientWidth - 20
			var height = document.body.clientHeight - 20

			//随机生成星星
			for (var i = 0; i < 70; i++) {
				var img = document.createElement('img')
				document.body.appendChild(img)
				img.src = './imgs/star.png'
				img.style.left = Math.random() * width + 'px'
				img.style.top = Math.random() * height + 'px'
				img.style.animationDelay = Math.random() * 3 + 's' //添加动画延迟时间
			}

			//随机生成流星
			for (var i = 0; i < 10; i++) {
				var lx = document.createElement('div')
				lx.className = 'star'
				lx.style.right = (Math.random() * 400 + 150) + 'px'
				lx.style.top = (Math.random() * 200 + 100) + 'px'
				lx.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间
				document.body.appendChild(lx)
			}
		</script>
	</body>

</html>
